<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!-- 1、头部 -->
<head th:replace="fragment/frontend_fragment::head(关于我)"></head>


<!-- 2、中间内容body(导航nav, 底部footer) -->
<body>

<!-- 容器局部刷新 -->
<div id="pageContainer">
    <div class="bg-about">
    <!-- 2.1：导航栏 -->
    <nav th:replace="~{fragment/frontend_fragment::nav(4)}"></nav>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <!-- 2.2：中间内容---关于我内容 -->
    <div class="m-container-big m-padded-tb-big m-opacity" style="vertical-align: middle">
        <div class="ui container">
            <div class="ui stackable grid">
                <div class="ten wide column about_picture">
                    <div class="ui segment" style="background: aliceblue !important;">
                        <img src="https://picsum.photos/id/239/800/600" th:src="@{/images/about_me.png}" alt=""
                             class="ui rounded image">
                    </div>
                </div>

                <div class="ui center aligned six wide column about_text">
                    <h3 class="ui top header attached segment">关于我</h3>

                    <!--自我介绍-->
                    <div class="ui attached m-text segment">
                        <p>爱编程、爱学习、爱折腾</p>
                        <p>虽然书读的少，但一直在努力</p>
                        <p>满怀热情，心存希望</p>
                        <p>念念不忘，必有回想</p>
                        <p>春风得意马蹄疾，一日看尽长安花</p>
                    </div>

                    <!--兴趣爱好-->
                    <div class="ui attached segment">
                        <div class="ui orange basic label">读书</div>
                        <div class="ui blue  basic label">编程</div>
                        <div class="ui teal  basic label">番剧</div>
                        <div class="ui red basic label">烹饪</div>
                        <div class="ui green basic label">运动</div>
                    </div>


                    <div class="ui  bottom attached segment">
                        <a class="ui green circular icon button" id="wechat"><i class="weixin icon"></i></a>
                        <a class="ui blue circular icon button" id="qq"><i class="qq icon"></i></a>
                        <a class="ui github black circular icon button" href="https://github.com/L1w31oO"
                           data-content="点击跳转：GitHub" data-position="bottom center" target="_blank"><i
                                class="github icon"></i></a>
                        <a class="ui gitee red circular icon button" href="https://gitee.com/L1w31oO"
                           data-content="点击跳转：Gitee" data-position="bottom center" target="_blank"><i
                                class="google icon"></i></a>
<!--                        <a class="ui csdn orange circular icon button" href="https://blog.csdn.net/weixin_45813509"-->
<!--                           data-content="点击跳转：CSDN" data-position="bottom center" target="_blank"><i-->
<!--                                class="copyright outline icon"></i></a>-->
                        <a class="ui email teal circular icon button" data-content="邮箱：liweibot@163.com"
                        data-position="bottom center"><i class="envelope icon"></i></a>
                    </div>


                    <div class="ui wechat-qr flowing popup transition hidden title-front-redius">
                        <div class="ui image">
                            <img src="../../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" style="width:110px"
                                 alt="" class="ui centered rounded image">
                            <div style="text-align: center">微信</div>
                        </div>
                    </div>

                    <div class="ui qq-qr flowing popup transition hidden title-front-redius">
                        <div class="ui image">
                            <img src="../../static/images/qq.jpg" th:src="@{/images/qq.jpg}" style="width:110px" alt=""
                                 class="ui centered rounded image">
                            <div style="text-align: center">QQ</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>

<!-- 2.3：底部footer -->
<footer th:replace="fragment/frontend_fragment::footer"></footer>

<!-- 3、js引用 -->
<!--/*/<th:block th:replace="fragment/frontend_fragment :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--/*/</th:block>/*/-->

<!-- 4、页面专用js -->
<script>

    // 移动端 导航栏点击显示
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    //4-2、图标跳转按钮 (github、gitee、csdn、wechat、qq、email)
    $('.github').popup();

    $('.gitee').popup();

    $('.csdn').popup();

    $('.email').popup();

    $('#wechat').popup({
        popup: $('.wechat-qr'),
        position: 'top center'
    });

    $('#qq').popup({
        popup: $('.qq-qr'),
        position: 'top center'
    });
</script>

</body>
</html>


